<template>
  <div class="super-flow-base-demo">
    <!-- <div class="tips">流程图操作工具：鼠标右键</div>
    :node-menu="nodeMenuList" -->
    <!-- <super-flow
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="origin"
      :graph-menu="graphMenuList"
      :link-menu="linkMenuList"
      :enter-intercept="enterIntercept"
      :output-intercept="outputIntercept"
      :link-desc="linkDesc"
    >
      <template v-slot:node="{ meta }">
        <div :class="`flow-node flow-node-${meta.prop}`">
          <header class="ellipsis">
            {{ meta.name }}
          </header>
          <section>
            {{ meta.desc }}
          </section>
        </div>
      </template>
    </super-flow> -->

    <!-- :graph-menu="graphMenuList"
      :link-menu="linkMenuList"
      :enter-intercept="enterIntercept"
      :output-intercept="outputIntercept"
      :link-desc="linkDesc" -->

    <super-flow
      ref="superFlow"
      :node-list="supernode"
      :link-list="superlink"
      :origin="origin"
      :link-base-style="linkBaseStyle"
      :link-style="linkStyle"
    >
      <template v-slot:node="{ meta }">
        <!-- <div :class="`flow-node flow-node-${meta.prop}`"> -->
        <!-- <header class="ellipsis">
          {{ meta.name }}
        </header>
        <section>销售金额:{{ meta.time }}</section> -->
        <!-- </div> -->
        <div class="card-panel">
          <!-- :class="{ highlight: highlighted.includes(meta.name) }"
            @click="handleSetLineChartData(meta.name)" -->
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              <!-- 销售金额 -->
              {{ meta.salesName }}
              <el-tooltip
                :content="meta.dataDetail"
                effect="light"
                placement="bottom"
              >
                <svg-icon size="small" icon-class="question" />
              </el-tooltip>
            </div>
            <div v-if="meta.value == null" class="card-panel-num">未更新</div>
            <div v-else>
              <!-- :decimals="1" -->
              <count-to
                :start-val="0"
                v-if="meta.name.includes('数')"
                :end-val="meta.value"
                :duration="duration"
                class="card-panel-num"
              />
              <count-to
                :start-val="0"
                v-else-if="meta.name.includes('率')"
                :decimals="2"
                :end-val="meta.value"
                :duration="duration"
                class="card-panel-num"
              />
              <count-to
                :start-val="0"
                v-else
                :end-val="meta.value"
                :duration="duration"
                class="card-panel-num"
              />
              <span
                v-show="
                  // meta.name.includes('综合退货率') ||
                  //  meta.name.includes('综合退货率') ||
                  meta.name.includes('率')
                "
                >%</span
              >
            </div>
            <div class="card-panel-echarts">
              <!-- <img
                  style="object-fit: contain; height: 20px; width: 150px"
                  src="@/assets/day/销售趋势.png"
                /> -->
            </div>
          </div>
          <div class="card-panel-right">
            <div class="flex">
              <div class="card-panel-text">环 比</div>
              <div class="card-panel-num">
                <i class="el-icon-caret-top" v-if="meta.chainSign == true" />
                <i
                  class="el-icon-caret-bottom"
                  v-else-if="meta.chainSign == false"
                />
                <count-to
                  :start-val="0"
                  :decimals="2"
                  v-if="meta.chain !== null"
                  :end-val="meta.chain"
                  :duration="duration"
                />
                <span v-if="meta.chain == null">-</span>%
              </div>
            </div>
            <div class="flex">
              <div class="card-panel-text">涨跌幅</div>
              <div class="card-panel-num">
                <i class="el-icon-caret-top" style="visibility: hidden" />
                <!-- <i
                  class="el-icon-caret-bottom"
                  v-else-if="meta.yoySign == false"
                />
                <count-to
                  :start-val="0"
                  :decimals="2"
                  v-if="meta.yoy !== null"
                  :end-val="meta.yoy"
                  :duration="duration"
                /> -->
                <span>{{ meta.yoy.toFixed(2) }}</span>
                <span v-if="meta.yoy == null">-</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </super-flow>

    <el-dialog
      :title="drawerConf.title"
      :visible.sync="drawerConf.visible"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        v-show="drawerConf.type === drawerType.node"
        ref="nodeSetting"
        :model="nodeSetting"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input
            v-model="nodeSetting.name"
            placeholder="请输入节点名称"
            maxlength="30"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="节点描述" prop="desc">
          <el-input
            v-model="nodeSetting.desc"
            placeholder="请输入节点描述"
            maxlength="30"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-form
        @keyup.native.enter="settingSubmit"
        @submit.native.prevent
        v-show="drawerConf.type === drawerType.link"
        ref="linkSetting"
        :model="linkSetting"
      >
        <el-form-item label="连线描述" prop="desc">
          <el-input v-model="linkSetting.desc" placeholder="请输入连线描述">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drawerConf.cancel"> 取 消 </el-button>
        <el-button type="primary" @click="settingSubmit"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
// 生成随机字符串
import { v4 as uuidv4 } from "uuid";
import { MessageBox, Message } from "element-ui";
const drawerType = {
  node: 0,
  link: 1,
};
export default {
  components: {
    CountTo,
  },
  data() {
    return {
      duration: 1000,

      supernode: [],
      superlink: [],

      linkBaseStyle: {
        color: "#666666", // line 颜色
        hover: "#FF0000", // line hover 的颜色
        textColor: "#666666", // line 描述文字颜色
        textHover: "#FF0000", // line 描述文字 hover 颜色
        font: "14px Arial", // line 描述文字 字体设置 参考 canvas font
        dotted: false, // 是否是虚线
        lineDash: [4, 4], // 虚线时生效，虚线长度和间隔长度
        background: "rgba(255,255,255,0.6)", // 描述文字背景色
      },
      drawerType,
      drawerConf: {
        title: "",
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf;
          conf.visible = true;
          conf.type = type;
          conf.info = info;
          if (conf.type === drawerType.node) {
            conf.title = "节点";
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields();
            this.$set(this.nodeSetting, "name", info.meta.name);
            this.$set(this.nodeSetting, "desc", info.meta.desc);
          } else {
            conf.title = "连线";
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields();
            this.$set(
              this.linkSetting,
              "desc",
              info.meta ? info.meta.desc : ""
            );
          }
        },
        cancel: () => {
          this.drawerConf.visible = false;
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate();
          } else {
            this.$refs.linkSetting.clearValidate();
          }
        },
      },
      linkSetting: {
        desc: "",
      },
      //默认节点新信息
      nodeSetting: {
        name: "节点名称",
        desc: "节点描述",
      },
      //二维坐标系原点
      // origin: [1000, 465],
      origin: [100, 0],
      //节点列表
      nodeList: [],
      //连接线列表
      linkList: [],
      //鼠标右键功能列表
      graphMenuList: [
        [
          {
            label: "开始节点",
            disable(graph) {
              return !!graph.nodeList.find(
                (node) => node.meta.prop === "start"
              );
            },
            selected: (graph, coordinate) => {
              const start = graph.nodeList.find(
                (node) => node.meta.prop === "start"
              );
              if (!start) {
                graph.addNode({
                  width: 100,
                  height: 80,
                  coordinate: coordinate,
                  meta: {
                    prop: "start",
                    name: "开始节点",
                  },
                });
              }
            },
          },
          {
            label: "红色节点",
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 160,
                height: 80,
                coordinate: coordinate,
                meta: {
                  prop: "condition",
                  name: "红色节点",
                },
              });
            },
          },
          {
            label: "黄色节点",
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 160,
                height: 80,
                coordinate: coordinate,
                meta: {
                  prop: "approval",
                  name: "黄色节点",
                },
              });
            },
          },
          {
            label: "绿色节点",
            disable: false,
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 160,
                height: 80,
                coordinate: coordinate,
                meta: {
                  prop: "cc",
                  name: "绿色节点",
                },
              });
            },
          },
          {
            label: "结束节点",
            disable(graph) {
              return !!graph.nodeList.find((node) => node.meta.prop === "end");
            },
            selected: (graph, coordinate) => {
              graph.addNode({
                width: 100,
                height: 80,
                coordinate: coordinate,
                meta: {
                  prop: "end",
                  name: "结束节点",
                },
              });
            },
          },
        ],
        [
          {
            label: "保存数据",
            selected: (graph, coordinate) => {
              console.log("保存数据:", JSON.stringify(graph.toJSON(), null, 2));
              this.$message({
                message: "保存成功！请前往控制台查看",
                type: "success",
              });
            },
          },
          {
            label: "全选",
            selected: (graph, coordinate) => {
              graph.selectAll();
            },
          },
        ],
      ],
      that: this,
      //选中鼠标右键功能列表--节点
      nodeMenuList: [
        [
          {
            label: "删除",
            disable: false,
            hidden(node) {
              return node.meta.prop === "start";
            },
            selected(node, coordinate) {
              MessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  Message.success("删除成功!");
                  node.remove();
                })
                .catch(() => {
                  Message.info("已取消操作!");
                });
            },
          },
        ],
        [
          {
            label: "编辑",
            selected: (node, coordinate) => {
              this.drawerConf.open(drawerType.node, node);
            },
          },
        ],
      ],
      //选中鼠标右键功能列表--连接线
      linkMenuList: [
        [
          {
            label: "删除",
            disable: false,
            selected: (link, coordinate) => {
              link.remove();
            },
          },
        ],
        [
          {
            label: "编辑",
            disable: false,
            selected: (link, coordinate) => {
              this.drawerConf.open(drawerType.link, link);
            },
          },
        ],
      ],
      signJsonData: [
        {
          id: 142,
          departmentId: "sss",
          departmentName: "公司-1",
          superviseTime: "2022-10-09 09:45:38",
          children: [
            {
              id: 149,
              departmentId: "saweee",
              departmentName: "公司-1-1",
              superviseTime: "2022-10-09 10:05:39",
              children: [
                {
                  id: 154,
                  departmentId: "wewqqq",
                  departmentName: "公司-1-1-1",
                  superviseTime: "2022-10-09 10:10:40",
                  children: [],
                },
                {
                  id: 155,
                  departmentId: "weee3",
                  departmentName: "公司-1-1-2",
                  superviseTime: null,
                  children: [],
                },
              ],
            },
            {
              id: 150,
              departmentId: "3422",
              departmentName: "公司-1-2",
              superviseTime: "2022-10-09 10:46:59",
              children: [
                {
                  id: 156,
                  departmentId: "5677",
                  departmentName: "公司-1-2-1",
                  superviseTime: null,
                  children: [],
                },
                {
                  id: 157,
                  departmentId: "86655",
                  departmentName: "公司-1-2-2",
                  superviseTime: null,
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 143,
          departmentId: "989iii",
          departmentName: "公司-2",
          superviseTime: "2022-10-09 09:48:04",
          children: [
            {
              id: 151,
              departmentId: "lkkj",
              departmentName: "公司-2-1",
              superviseTime: null,
              children: [],
            },
          ],
        },
        {
          id: 144,

          departmentId: "hjtjyu",
          departmentName: "公司-3",
          superviseTime: "2022-10-09 09:49:32",
          children: [
            {
              id: 152,
              departmentId: "yutyutyu",
              departmentName: "公司-3-1",
              superviseTime: null,
              children: [],
            },
            {
              id: 153,
              departmentId: "yutyt",
              departmentName: "公司-3-2",
              superviseTime: null,
              children: [],
            },
          ],
        },
      ],
    };
  },
  created() {
    // console.log(uuidv4());
    //默认加载节点
    const nodeList = [
      {
        id: "nodeS3WgFnzCI15X58Qw",
        width: 100,
        height: 80,
        coordinate: [-644, -148],
        meta: {
          prop: "start",
          name: "开始节点",
          desc: "流程开始",
        },
      },
      {
        id: "node7WXbwOR6kSFD53Hf",
        width: 160,
        height: 80,
        coordinate: [-442, -148],
        meta: {
          prop: "condition",
          name: "红色节点",
          desc: "应急触发",
        },
      },
      {
        id: "nodefHsy9uJObPtdHZv1",
        width: 160,
        height: 80,
        coordinate: [-200, -148],
        meta: {
          prop: "approval",
          name: "黄色节点",
          desc: "应急复查",
        },
      },
      {
        id: "nodeqkK9zjcDz53xKRlK",
        width: 160,
        height: 80,
        coordinate: [34, -209],
        meta: {
          prop: "cc",
          name: "绿色节点",
          desc: "复查通过",
        },
      },
      {
        id: "nodeni9QOqT3mI7hsMau",
        width: 160,
        height: 80,
        coordinate: [-442, -275],
        meta: {
          prop: "condition",
          name: "红色节点",
        },
      },
      {
        id: "nodeZBK0ZPpgMe1exezE",
        width: 160,
        height: 80,
        coordinate: [-200, -275],
        meta: {
          prop: "approval",
          name: "黄色节点",
        },
      },

      {
        id: "nodesyxisLH1hJDdPsxx",
        width: 160,
        height: 80,
        coordinate: [34, -75],
        meta: {
          prop: "cc",
          name: "绿色节点",
        },
      },
      {
        id: "node0aiA9VuhjkiAdZCs",
        width: 160,
        height: 80,
        coordinate: [-200, -2],
        meta: {
          prop: "approval",
          name: "黄色节点",
        },
      },
      {
        id: "nodeG3WeFnzCI15X58Qw",
        width: 160,
        height: 80,
        coordinate: [-442, -2],
        meta: {
          prop: "condition",
          name: "红色节点",
        },
      },
      {
        id: "nodeDhVU6w2KbEnJCjZs",
        width: 100,
        height: 80,
        coordinate: [286, -133],
        meta: {
          prop: "end",
          name: "结束节点",
          desc: "流程结束",
        },
      },
    ];
    //默认加载连接线
    const linkList = [
      {
        id: "linkcs9ZhumWeTHrtUy8",
        startId: "nodeS3WgFnzCI15X58Qw",
        endId: "nodeni9QOqT3mI7hsMau",
        startAt: [100, 40],
        endAt: [0, 40],
        meta: {
          desc: "开始流程",
        },
      },
      {
        id: "linkBDld5rDBw4C6kiva",
        startId: "nodefHsy9uJObPtdHZv1",
        endId: "nodeqkK9zjcDz53xKRlK",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: {
          desc: "复核",
        },
      },
      {
        id: "linkA0ZZxRlDI9AOonuq",
        startId: "node7WXbwOR6kSFD53Hf",
        endId: "nodefHsy9uJObPtdHZv1",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "linkhCKTpRAf89gcujGS",
        startId: "nodeni9QOqT3mI7hsMau",
        endId: "nodeZBK0ZPpgMe1exezE",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "link2o7VZ7DRaSFKtB0g",
        startId: "nodeqkK9zjcDz53xKRlK",
        endId: "nodeDhVU6w2KbEnJCjZs",
        startAt: [160, 40],
        endAt: [0, 25],
        meta: null,
      },
      {
        id: "linkII013ovDctUDuPLu",
        startId: "nodeS3WgFnzCI15X58Qw",
        endId: "nodeG3WeFnzCI15X58Qw",
        startAt: [100, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "link6MOmsq1EqzlWcG1n",
        startId: "nodeZBK0ZPpgMe1exezE",
        endId: "nodeqkK9zjcDz53xKRlK",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "link52SczSXHmuyKDzRU",
        startId: "nodesyxisLH1hJDdPsxx",
        endId: "nodeDhVU6w2KbEnJCjZs",
        startAt: [160, 40],
        endAt: [0, 25],
        meta: null,
      },
      {
        id: "link2hBQDTuIG4ZFYyE0",
        startId: "node0aiA9VuhjkiAdZCs",
        endId: "nodesyxisLH1hJDdPsxx",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "linkrwdW87FmOma5rPVo",
        startId: "nodeG3WeFnzCI15X58Qw",
        endId: "node0aiA9VuhjkiAdZCs",
        startAt: [160, 40],
        endAt: [0, 40],
        meta: null,
      },
      {
        id: "linknL75dQV0AWZA85sq",
        startId: "nodeS3WgFnzCI15X58Qw",
        endId: "node7WXbwOR6kSFD53Hf",
        startAt: [100, 40],
        endAt: [0, 40],
        meta: null,
      },
    ];
    setTimeout(() => {
      this.nodeList = nodeList;
      this.linkList = linkList;
    }, 100);
    let result = JSON.parse(localStorage.getItem("result"));
    console.log(JSON.stringify(result));
    if (result) {
      this.initNodeSign2(result);
    }
  },
  methods: {
    initNodeSign2(result) {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        maxY = 0,
        this_ = this,
        boxHeight = 108,
        boxWidth = 400,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 20; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodY = {};
      function getCHildren(arr, startId, level) {
        ++level;
        arr.forEach((item, i) => {
          let nodeId1 = `${uuidv4()}`; //id确保唯一
          coodY[level] = coodY[level] ? coodY[level] + lineHeight : totaly1;
          if (maxY >= coodY[level]) {
            coodY[level] = maxY + (i ? lineHeight : 0);
          }
          maxY = coodY[level];
          nodeList.push({
            id: nodeId1,
            width: boxWidth,
            height: boxHeight,
            coordinate: [totalX1 + lineWidth * (level - 1), coodY[level]],
            meta: {
              salesName: item.salesName,
              name: item.name,
              value: item.value,
              chainSign: item.chainSign,
              chain: item.chain,
              dataDetail: item.dataDetail,
              yoy: item.yoy,
              yoySign: item.yoySign,
              state: item.signState > 0 ? 1 : 0,
              time: item.value,
              userName: item.signName, //这是页面其他用到的数据
              type: "feedback-sign",
            },
          });
          if (startId) {
            linkList.push({
              id: `${uuidv4()}`,
              startId: startId,
              endId: nodeId1,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          }
          if (item.children && item.children.length) {
            getCHildren(item.children, nodeId1, level);
          }
        });
      }
      getCHildren(result, "", 0); //方法调用
      console.log(JSON.stringify(nodeList));
      console.log(JSON.stringify(linkList));
      //   this.nodeList.nodeList = nodeList;
      //   this.nodeList.linkList = linkList;
      this.supernode = nodeList;
      this.superlink = linkList;
    },

    //连线进入节点限制函数
    enterIntercept(formNode, toNode, graph) {
      const formType = formNode.meta.prop;
      switch (toNode.meta.prop) {
        //开始节点--只出不进
        case "start":
          return false;
        case "approval":
          return ["start", "approval", "condition", "cc"].includes(formType);
        case "condition":
          return ["start", "approval", "condition", "cc"].includes(formType);
        case "end":
          return ["approval", "cc"].includes(formType);
        default:
          return true;
      }
    },
    //节点生成连线限制
    outputIntercept(node, graph) {
      return !(node.meta.prop === "end");
    },
    linkStyle(link) {
      if (link.meta && link.meta.desc === "1") {
        return {
          color: "red",
          hover: "#FF00FF",
          dotted: true,
        };
      } else {
        return {};
      }
    },
    //生成 link 定制描述文字（连接线描述）
    linkDesc(link) {
      return link.meta ? link.meta.desc : "";
    },
    //描述确定按钮
    settingSubmit() {
      const conf = this.drawerConf;
      if (this.drawerConf.type === drawerType.node) {
        if (!conf.info.meta) conf.info.meta = {};
        Object.keys(this.nodeSetting).forEach((key) => {
          this.$set(conf.info.meta, key, this.nodeSetting[key]);
        });
        this.$refs.nodeSetting.resetFields();
      } else {
        if (!conf.info.meta) conf.info.meta = {};
        Object.keys(this.linkSetting).forEach((key) => {
          this.$set(conf.info.meta, key, this.linkSetting[key]);
        });
        this.$refs.linkSetting.resetFields();
      }
      conf.visible = false;
    },
  },
};
</script>
<style lang="scss" >
.tips {
  color: red;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.super-flow-base-demo {
  width: 100%;
  height: 1800px;
  margin: 0 auto;
  background-color: #f5f5f5;

  .super-flow__node {
    .flow-node {
      > header {
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        color: #ffffff;
      }

      > section {
        text-align: center;
        line-height: 20px;
        overflow: hidden;
        padding: 6px 12px;
        word-break: break-all;
      }

      &.flow-node-start {
        > header {
          background-color: #55abfc;
        }
      }

      &.flow-node-condition {
        > header {
          background-color: #bc1d16;
        }
      }

      &.flow-node-approval {
        > header {
          background-color: rgba(188, 181, 58, 0.76);
        }
      }

      &.flow-node-cc {
        > header {
          background-color: #30b95c;
        }
      }

      &.flow-node-end {
        > header {
          height: 32px;

          background-color: rgb(0, 0, 0);
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-carousel__indicator--horizontal {
  display: none;
}

.highlight {
  border-top: 5px solid #36a3f7;
}

i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}

i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

//上三角
.increase {
  width: 10px;
  height: 10px;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  margin: 0 0 3px 5px;
}

//下三角
.decrease {
  width: 10px;
  height: 10px;
  border-width: 3px;
  border-color: green transparent transparent transparent;
  border-style: solid;
  margin: 3px 0 0 5px;
}

// .panel-group {
//   margin-top: 18px;

//   .card-panel-col {
//     margin-bottom: 32px;
//   }

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  // border-color: rgba(0, 0, 0, .05);

  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }

    .icon-people {
      background: #40c9c6;
    }

    .icon-message {
      background: #36a3f7;
    }

    .icon-money {
      background: #f4516c;
    }

    .icon-shopping {
      background: #34bfa3;
    }
  }

  .icon-people {
    color: #40c9c6;
  }

  .icon-message {
    color: #36a3f7;
  }

  .icon-money {
    color: #f4516c;
  }

  .icon-shopping {
    color: #34bfa3;
  }

  .card-panel-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    float: left;
    font-size: 48px;
  }

  .card-panel-description {
    float: left;

    font-weight: bold;
    margin: 16px;
    margin-left: 10px;

    .card-panel-text {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
      margin-bottom: 20px;
    }

    .card-panel-num {
      font-size: 20px;
    }
    .card-panel-echarts {
      background-color: red;
    }
  }

  .card-panel-right {
    float: right;
    // text-align: center;
    font-weight: bold;
    margin: 26px;
    margin-right: 10px;

    .flex {
      display: flex;
    }

    .card-panel-text {
      text-align: center;
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      margin-bottom: 12px;
    }

    .card-panel-num {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
  }
}
// }

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
